<template>
  <ul class="list" ref="ABC" @click='hand'>
      <li class="item" v-for="item of ABC" :key="item"
       @touchstart='status=true'
        @touchmove='TouchMove'
        @touchend='status=false'
       >
        {{item}}
      </li>
  </ul>
</template>

<script>
export default {
    name:'cityABC',
    props:{ABC:Array},
    methods:{
      hand(e){  
        this.$emit('getLetter',e.target.innerText)
      },
      TouchMove(e){
        if(this.status){
          // if(this.timer){
          //   clearTimeout(this.timer)
          // }
          // this.timer=setTimeout(()=>{
            let touchY=e.touches[0].clientY
            let ultop= this.$refs['ABC'].getBoundingClientRect().top
            let liheight= this.$refs['ABC'].firstElementChild.offsetHeight
            let index=  Math.floor(( touchY-ultop)/liheight)
            if(index>=0 && index<=21){
            //  console.log(this.ABC[index]);
             this.$emit('getLetter',this.ABC[index])
           }//节流 最多每隔15ms执行一次 提高页面性能  但是在模拟器中会卡顿  
          // },15)
        }
        },
    },
    data(){
      return{
        status:false,
        timer:null
      }
    },
    computed: {
      // liheight(){
      //   return this.$refs['ABC'].firstElementChild.offsetHeight
      // }
    }
}
</script>

<style lang='stylus' scoped>
@import '~@/assets/css/varibles.styl' 
.list
    width .3rem
    position fixed
    top 50%
    transform translateY(-50%)
    right 0.1rem
    max-height 100vh
    .item
      line-height .38rem
      color $bgABC
      text-align center
</style>